<template>
  <div class="forum-container">
    <div class="main-layout">
      <aside class="sidebar-left">
        <el-card v-if="currentUser" class="user-info-card" shadow="hover">
          <div class="user-profile">
            <el-avatar :size="70" :src="currentUser.avatarUrl" class="user-avatar" />
            <div class="user-name">{{ currentUser.name }}</div>
            <div class="user-username">@{{ currentUser.username }}</div>
          </div>
          <el-divider />
          <div class="user-details">
            <div class="detail-item">
              <el-icon><School /></el-icon>
              <span>{{ currentUser.department }}</span>
            </div>
            <div class="detail-item">
              <el-icon><Message /></el-icon>
              <span>{{ currentUser.email }}</span>
            </div>
            <div class="detail-item">
              <el-icon><Iphone /></el-icon>
              <span>{{ currentUser.phone }}</span>
            </div>
          </div>
        </el-card>
        </aside>

      <main class="content-right">
        <div v-if="viewMode === 'list'">
          <el-card shadow="never" class="module-card">
            <template #header>
              <div class="card-header">
                <span>🔥 热门帖子</span>
              </div>
            </template>
            <el-row :gutter="20" v-loading="hotListLoading">
              <el-col :xs="24" :sm="12" :md="6" v-for="thread in hotThreads" :key="thread.id" class="hot-post-col">
                <el-card shadow="hover" class="hot-post-card" @click="openThread(thread)">
                  <div class="hot-post-title">{{ thread.title }}</div>
                  <div class="hot-post-meta">
                    <el-avatar :size="20" :src="thread.authorAvatar" />
                    <span class="author-name">{{ thread.authorName }}</span>
                  </div>
                  <div class="hot-post-stats">
                    <span><el-icon><ChatDotRound /></el-icon> {{ thread.replyCount }}</span>
                    <span><el-icon><View /></el-icon> {{ thread.viewCount }}</span>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </el-card>

          <el-card shadow="never" class="module-card">
            <template #header>
              <div class="list-header">
                <span>所有帖子</span>
                <div class="controls-wrapper">
                  <el-select v-model="listQuery.sortBy" placeholder="排序方式" @change="handleSortChange" style="width: 150px; margin-right: 15px;">
                    <el-option label="按最新回复" value="last_reply_at"></el-option>
                    <el-option label="按发布时间" value="created_at"></el-option>
                    <el-option label="按回复数量" value="reply_at"></el-option>
                  </el-select>
                  <el-input
                    v-model="listQuery.searchQuery"
                    placeholder="搜索帖子标题..."
                    class="search-input"
                    :prefix-icon="Search"
                    @keyup.enter="handleSearch"
                    clearable
                  />
                  <el-button type="primary" :icon="Plus" @click="newThreadDialogVisible = true">发布新帖</el-button>
                </div>
              </div>
            </template>
            
            <div class="thread-list-container" v-loading="listLoading">
              <el-card v-for="thread in threads" :key="thread.id" class="thread-card" shadow="hover" @click="openThread(thread)">
                <div class="thread-card-header">
                  <el-tag v-if="thread.isPinned" type="danger" size="small" effect="dark" class="pin-tag">置顶</el-tag>
                  <span class="thread-title">{{ thread.title }}</span>
                </div>
                <p class="thread-content-snippet">{{ truncateContent(thread.content, 120) }}</p>
                <div class="thread-card-footer">
                  <div class="author-cell">
                    <el-avatar :size="24" :src="thread.authorAvatar" />
                    <span class="author-name">{{ thread.authorName }}</span>
                  </div>
                  <div class="thread-stats">
                    <span><el-icon><ChatDotRound /></el-icon> {{ thread.replyCount }} 回复</span>
                    <span><el-icon><View /></el-icon> {{ thread.viewCount }} 查看</span>
                  </div>
                  <div class="thread-time">
                    <span>创建于: {{ formatTime(thread.createdAt) }}</span>
                    <span>最后回复: {{ formatTime(thread.lastReplyAt) }}</span>
                  </div>
                </div>
              </el-card>
            </div>

            <el-pagination
              background
              layout="prev, pager, next, total"
              :total="totalThreads"
              :current-page="listQuery.page"
              :page-size="listQuery.pageSize"
              @current-change="handleListPageChange"
              class="pagination-container"
            />
          </el-card>
        </div>

        <div v-if="viewMode === 'detail' && currentThread" class="detail-view">
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item><a href="#" @click.prevent="backToList">论坛</a></el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentThread.threadDetails.title }}</el-breadcrumb-item>
          </el-breadcrumb>
          
          <el-card class="thread-content-card" shadow="never" v-loading="detailLoading">
            <template #header>
              <h2>{{ currentThread.threadDetails.title }}</h2>
              <div class="author-info">
                <el-avatar :size="40" :src="currentThread.threadDetails.authorAvatar" />
                <div class="info-text">
                  <span class="author-name">{{ currentThread.threadDetails.authorName }}</span>
                  <span class="post-time">发布于: {{ formatTime(currentThread.threadDetails.createdAt) }}</span>
                </div>
              </div>
            </template>
            <div class="content-body" v-html="currentThread.threadDetails.content"></div>
          </el-card>

          <el-card class="replies-card" shadow="never" v-loading="detailLoading">
            <template #header>
              <span>{{ currentThread.replies.total }} 条回复</span>
            </template>
            <div class="reply-item" v-for="(reply, index) in currentThread.replies.list" :key="reply.id">
              <div class="reply-header">
                <div class="author-info">
                  <el-avatar :size="32" :src="reply.authorAvatar" />
                  <div class="info-text">
                    <span class="author-name">{{ reply.authorName }}</span>
                    <span class="post-time">{{ formatTime(reply.createdAt) }}</span>
                  </div>
                </div>
                <div class="floor-number">
                  {{ (replyQuery.page - 1) * replyQuery.pageSize + index + 2 }}楼
                </div>
              </div>
              <div class="content-body" v-html="reply.content"></div>
              <div class="reply-footer">
                <span class="like-count" @click="handleLike(reply)">
                  <el-icon><Pointer /></el-icon>
                  {{ reply.thumbsUpCount }}
                </span>
                <span class="dislike-count" @click="handleDislike(reply)">
                  <el-icon><Pointer /></el-icon>
                </span>
                <span
                  class="action-delete"
                  v-if="currentUser && currentThread && (currentUser.id == currentThread.threadDetails.authorId || currentUser.id == reply.authorId)"
                  @click="handleDeleteReply(reply)"
                >
                  <el-icon><Delete /></el-icon>
                  <span>删除</span>
                </span>
              </div>
              <el-divider />
            </div>
            
            <el-pagination
              v-if="currentThread.replies.total > replyQuery.pageSize"
              background
              layout="prev, pager, next"
              :total="currentThread.replies.total"
              :current-page="replyQuery.page"
              :page-size="replyQuery.pageSize"
              @current-change="handleReplyPageChange"
              class="pagination-container"
            />
          </el-card>

          <el-card class="reply-editor-card" shadow="never">
            <template #header>发表你的回复</template>
            <div style="border: 1px solid #ccc">
              <Toolbar
                style="border-bottom: 1px solid #ccc"
                :editor="editorRef"
                :defaultConfig="toolbarConfig"
                mode="default"
              />
              <Editor
                style="height: 200px; overflow-y: hidden;"
                v-model="newReplyContent"
                :defaultConfig="editorConfig"
                mode="default"
                @onCreated="handleCreated"
              />
            </div>
            <el-button type="primary" @click="submitReply" class="submit-reply-btn">提交回复</el-button>
          </el-card>

          <el-upload
            ref="uploadRef"
            style="display: none"
            action="#"
            :http-request="handleFileUpload"
            :show-file-list="false"
            :before-upload="beforeFileUpload"
          />
        </div>
      </main>
    </div>

    <el-dialog v-model="newThreadDialogVisible" title="发布新帖" width="60%">
      <el-form :model="newThreadForm" label-position="top">
        <el-form-item label="标题">
          <el-input v-model="newThreadForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            :rows="10"
            v-model="newThreadForm.content"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="newThreadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNewThread">发布</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, shallowRef, onBeforeUnmount } from 'vue';
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { Boot } from '@wangeditor/editor';

import { ElMessage, ElMessageBox } from 'element-plus';
// Import new icons for the user card
import { Search, Plus, ArrowRight, View, ChatDotRound, Pointer, Delete, School, Message, Iphone } from '@element-plus/icons-vue';

import { 
  getThreads, 
  getThreadById, 
  createThread, 
  createReply, 
  addThreadReadCount, 
  likeReply, 
  dislikeReply,
  deleteReply,
  uploadImage,
  uploadFile
} from '@/services/ForumService';

// --- All script logic remains the same ---
// --- 状态管理 (无改动) ---
const viewMode = ref('list');
const listLoading = ref(true);
const hotListLoading = ref(true);
const detailLoading = ref(false);
const threads = ref([]);
const hotThreads = ref([]);
const totalThreads = ref(0);
const listQuery = reactive({
  page: 1,
  pageSize: 7,
  sortBy: 'last_reply_at',
  searchQuery: '',
});
const currentThread = ref(null);
const currentThreadId = ref(null);
const replyQuery = reactive({
  page: 1,
  pageSize: 7,
});
const newThreadDialogVisible = ref(false);
const newThreadForm = reactive({
  title: '',
  content: '',
});
const newReplyContent = ref('');
const currentUser = ref(null);

const uploadRef = ref(null);
const editorRef = shallowRef();
const activeEditor = ref(null);

// --- Wangeditor 自定义菜单 ---
class FileMenu {
    constructor() {
        this.title = '上传文件';
        this.iconSvg = `<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.44L849.44 272a32 32 0 0 0-45.28-45.28L576 454.72V128h-64v326.72L283.84 226.72a32 32 0 0 0-45.28 45.28L544 578.56z"></path></svg>`;
        this.tag = 'button';
    }
    getValue(editor) { return ''; }
    isActive(editor) { return false; }
    isDisabled(editor) { return false; }

    exec(editor, value) {
        activeEditor.value = editor;
        if (uploadRef.value) {
            uploadRef.value.$el.querySelector('input').click();
        }
    }
}
const menuConf = {
    key: 'uploadFileMenu',
    factory() {
        return new FileMenu();
    },
};
Boot.registerMenu(menuConf);

// --- Wangeditor 配置 (无改动) ---
const toolbarConfig = {
  toolbarKeys: [
    'headerSelect', 'bold', 'italic', 'underline', 'through', '|',
    'color', 'bgColor', '|',
    'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', '|',
    'insertLink', 
    'insertImage',
    'uploadFileMenu',
    '|',
    'undo', 'redo'
  ],
  excludeKeys: [ 'fullScreen','insertImage' ]
};

const editorConfig = {
  placeholder: '请输入回复，支持拖拽粘贴图片，或使用工具栏上传图片/文件...',
  MENU_CONF: {
    uploadImage: {
      async customUpload(file, insertFn) {
        try {
          const url = await uploadImage(file);
          insertFn(url, file.name, url); 
          ElMessage.success('图片粘贴/拖拽上传成功');
        } catch (error) {
          ElMessage.error(error.message || '图片上传失败');
        }
      },
    }
  }
};

// --- 文件上传逻辑 ---
const beforeFileUpload = (file) => {
  const isLt20M = file.size / 1024 / 1024 < 20;
  if (!isLt20M) {
    ElMessage.error('上传文件大小不能超过 20MB!');
  }
  return isLt20M;
};

const handleFileUpload = async (options) => {
  const file = options.file;
  const editor = activeEditor.value;

  if (!editor) {
    ElMessage.error('无法找到活动的编辑器实例！请重试。');
    return;
  }

  ElMessage.info('文件正在上传中，请稍候...');

  try {
    const fileData = await uploadFile(file);
    const { url, fileName, fileType } = fileData;

    if (fileType && fileType.startsWith('image/')) {
      editor.dangerouslyInsertHtml(`<img src="${url}" alt="${fileName}" style="max-width: 100%;"/>`);
    } else {
      const html = `
        <p>
          <a
            href="${url}"
            target="_blank"
            download="${fileName}"
            class="file-download-link"
          >
            <span style="font-size: 1.2em; vertical-align: middle;">📎</span> ${fileName} (点击下载)
          </a>
        </p>`;
      editor.dangerouslyInsertHtml(html);
    }
    
    ElMessage.success('文件上传成功！');
  } catch (error) {
    ElMessage.error(error.message || '文件上传失败');
    console.error("File upload failed:", error);
  }
};

// --- 生命周期与回调 (无改动) ---
onBeforeUnmount(() => {
    const editor = editorRef.value;
    if (editor == null) return;
    editor.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor;
};

// --- 数据获取与事件处理 (无改动) ---
const fetchHotThreads = async () => {
  hotListLoading.value = true;
  try {
    const hotListQuery = { page: 1, pageSize: 8, sortBy: 'reply_at' };
    const data = await getThreads(hotListQuery);
    hotThreads.value = data.list;
  } catch (error) {
    ElMessage.error('获取热门帖子失败: ' + error.message);
  } finally {
    hotListLoading.value = false;
  }
};

const fetchThreads = async () => {
  listLoading.value = true;
  try {
    const data = await getThreads(listQuery);
    threads.value = data.list;
    totalThreads.value = data.total;
  } catch (error) {
    ElMessage.error('获取帖子列表失败: ' + error.message);
  } finally {
    listLoading.value = false;
  }
};

const fetchThreadDetail = async (id) => {
    detailLoading.value = true;
    currentThreadId.value = id;
    try {
        const data = await getThreadById(id, replyQuery);
        currentThread.value = data;
    } catch (error) {
        ElMessage.error('获取帖子详情失败: ' + error.message);
    } finally {
        detailLoading.value = false;
    }
};

onMounted(() => {
  try {
    const userData = localStorage.getItem('user');
    if (userData) {
      currentUser.value = JSON.parse(userData);
    } else {
      // Fallback for testing if localStorage is empty
      console.warn("No user data in localStorage. Using placeholder data.");
      // currentUser.value = {"id":"1","username":"teacher","password":null,"name":"刘老师","email":"user1@example.com","phone":"13577581690123","department":"计算机学院","faceDescriptor":null,"avatarUrl":"http://47.113.97.144/file/d0e15d91-45c5-4e56-9be6-79fb1b321971-QQ%E5%9B%BE%E7%89%8720240702103015.jpg","avatar":"http://47.113.97.144/file/d0e15d91-45c5-4e56-9be6-79fb1b321971-QQ%E5%9B%BE%E7%89%8720240702103015.jpg"};
    }
  } catch (e) {
    console.error("无法从本地存储中解析用户信息:", e);
  }

  fetchHotThreads();
  fetchThreads();
});

const handleLike = async (reply) => {
  try {
    const result = await likeReply(reply.id);
    if (result.msg === "点赞成功") {
      reply.thumbsUpCount++;
      ElMessage.success('点赞成功！');
    } else if (result.msg === "已经存在点赞") {
      ElMessage.info('您已经点过赞了');
    }
  } catch (error) {
    ElMessage.error(error.message || '点赞失败，请稍后重试');
  }
};

const handleDislike = async (reply) => {
  try {
    const result = await dislikeReply(reply.id);
    switch (result.msg) {
      case '取消点赞成功':
        reply.thumbsUpCount--;
        ElMessage.success('操作成功');
        break;
      case '点踩成功':
        ElMessage.success('操作成功');
        break;
      case '已经点踩':
        ElMessage.info('您已经点过踩了');
        break;
      default:
        ElMessage.warning(result.msg || '未知响应');
        break;
    }
  } catch (error) {
    ElMessage.error(error.message || '操作失败，请稍后重试');
  }
};

const handleDeleteReply = async (replyToDelete) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这条回帖吗？此操作不可恢复。',
      '删除确认',
      {
        confirmButtonText: '确定删除',
        cancelButtonText: '取消',
        type: 'warning',
        icon: Delete,
      }
    );
    const result = await deleteReply(replyToDelete.id);
    ElMessage.success(result.msg || '删除成功');
    await fetchThreadDetail(currentThreadId.value);
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error(error.message || '删除失败，请稍后重试');
    }
  }
};

const handleSearch = () => {
  listQuery.page = 1;
  fetchThreads();
};

const handleSortChange = () => {
  listQuery.page = 1;
  fetchThreads();
};

const handleListPageChange = (page) => {
  listQuery.page = page;
  fetchThreads();
};

const handleReplyPageChange = (page) => {
  replyQuery.page = page;
  fetchThreadDetail(currentThreadId.value);
};

const openThread = async (row) => {
  const threadInList = threads.value.find(t => t.id === row.id);
  if (threadInList) {
    threadInList.viewCount++;
  }
  viewMode.value = 'detail';
  replyQuery.page = 1;
  addThreadReadCount(row.id);
  fetchThreadDetail(row.id);
};

const backToList = () => {
  viewMode.value = 'list';
  currentThread.value = null;
  currentThreadId.value = null;
  fetchHotThreads();
  fetchThreads();
};

const submitNewThread = async () => {
  if (!newThreadForm.title || !newThreadForm.content) {
    return ElMessage.warning('标题和内容不能为空');
  }
  try {
    const newThreadData = { ...newThreadForm };
    const result = await createThread(newThreadData); 
    ElMessage.success('发布成功');
    newThreadDialogVisible.value = false;
    newThreadForm.title = '';
    newThreadForm.content = '';
    if (result && result.threadId) {
      openThread({ id: result.threadId });
    } else {
      backToList();
    }
  } catch(error) {
    ElMessage.error('发布失败: ' + error.message);
  }
};

const submitReply = async () => {
  const editor = editorRef.value;
  if (!editor || editor.isEmpty()) { 
    return ElMessage.warning('回复内容不能为空');
  }
  try {
    const replyData = { content: newReplyContent.value };
    const totalReplies = currentThread.value.replies.total;
    const pageSize = replyQuery.pageSize;
    const lastPage = Math.ceil((totalReplies + 1) / pageSize);
    await createReply(currentThreadId.value, replyData);
    ElMessage.success('回复成功');
    newReplyContent.value = '';
    replyQuery.page = lastPage > 0 ? lastPage : 1;
    fetchThreadDetail(currentThreadId.value);
  } catch (error) {
    ElMessage.error('回复失败: ' + error.message);
  }
};


// --- 工具函数 (无改动) ---
const formatTime = (timeArray) => {
  if (!Array.isArray(timeArray) || timeArray.length < 5) {
    return '暂无';
  }
  const [year, month, day, hour, minute, second = 0] = timeArray;
  const date = new Date(year, month - 1, day, hour, minute, second);
  if (isNaN(date.getTime())) {
    return '无效时间';
  }
  return date.toLocaleString('zh-CN', { hour12: false, year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
};

const truncateContent = (content, length = 100) => {
  if (!content) return '暂无内容预览...';
  const text = content.replace(/<[^>]*>?/gm, '');
  if (text.length <= length) {
    return text;
  }
  return text.substring(0, length) + '...';
};
</script>

<style scoped>
/* --- NEW STYLES for the layout and sidebar --- */
.forum-container {
  max-width: 1400px; /* Increased max-width for sidebar */
  margin: 20px auto;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

.main-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.sidebar-left {
  width: 280px;
  flex-shrink: 0;
  position: sticky; /* Make sidebar sticky */
  top: 20px;      /* Stick to 20px from the top */
}

.content-right {
  flex-grow: 1;
  min-width: 0; /* Prevents flexbox overflow issues */
}

.user-info-card {
  text-align: center;
}

.user-profile {
  padding: 10px 0;
}

.user-avatar {
  margin-bottom: 15px;
  border: 3px solid #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.user-name {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.user-username {
  font-size: 14px;
  color: #909399;
  margin-top: 4px;
}

.user-details {
  text-align: left;
  padding: 0 10px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  font-size: 14px;
  color: #606266;
}

.detail-item .el-icon {
  margin-right: 12px;
  font-size: 16px;
  color: #909399;
}

/* --- ADJUSTED & ORIGINAL STYLES --- */
.module-card {
  margin-bottom: 25px;
}
.card-header span {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}
.hot-post-col {
  margin-bottom: 20px;
}
.hot-post-card {
  cursor: pointer;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hot-post-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hot-post-meta {
  font-size: 13px;
  color: #909399;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.hot-post-meta .author-name {
  margin-left: 8px;
}
.hot-post-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #606266;
  border-top: 1px solid #f0f2f5;
  padding-top: 8px;
}
.hot-post-meta .el-icon,
.hot-post-stats .el-icon {
  margin-right: 4px;
  position: relative;
  top: 2px;
}
.hot-post-stats span {
    display: flex;
    align-items: center;
}
.thread-list-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.thread-card {
  cursor: pointer;
}
.thread-card-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.pin-tag {
  margin-right: 8px;
  flex-shrink: 0;
}
.thread-title {
  font-weight: 600;
  font-size: 17px;
  color: #303133;
  transition: color 0.2s;
}
.thread-card:hover .thread-title {
  color: #409eff;
}
.thread-content-snippet {
  color: #606266;
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 15px 0;
  min-height: 40px;
}
.thread-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
  padding-top: 10px;
  border-top: 1px solid #f0f2f5;
  font-size: 13px;
  color: #909399;
}
.thread-stats {
  display: flex;
  gap: 20px;
}
.thread-stats span,
.author-cell {
  display: flex;
  align-items: center;
}
.thread-stats .el-icon,
.author-cell .el-icon {
  margin-right: 5px;
  font-size: 14px;
}
.thread-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
}
.author-cell .author-name {
  margin-left: 8px;
}
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.controls-wrapper {
  display: flex;
  align-items: center;
}
.search-input {
  width: 250px;
  margin-right: 15px;
}
.pagination-container {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
}
.detail-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.thread-content-card h2 {
  margin-top: 0;
}
.author-info {
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.author-info .info-text {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}
.info-text .author-name {
  font-weight: bold;
}
.author-info .post-time {
  font-size: 0.85em;
  color: #909399;
}
.content-body {
  padding: 15px 0;
  line-height: 1.8;
  color: #606266;
}
.content-body :deep(img) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.content-body :deep(.file-download-link) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background-color: #f4f4f5;
  color: #606266;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.2s ease-in-out;
}
.content-body :deep(.file-download-link:hover) {
  border-color: #c6e2ff;
  background-color: #ecf5ff;
  color: #409eff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.replies-card .el-divider--horizontal {
    margin: 15px 0;
}
.reply-item:last-child .el-divider--horizontal {
    display: none;
}
.reply-editor-card {
  margin-top: 10px;
}
.submit-reply-btn {
  margin-top: 15px;
  float: right;
}
.reply-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 20px;
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
}
.like-count,
.dislike-count,
.action-delete {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: color 0.2s;
}
.like-count:hover,
.dislike-count:hover {
  color: #409eff;
}
.action-delete:hover {
  color: #F56C6C;
}
.action-delete .el-icon {
  margin-right: 4px;
}
.like-count .el-icon {
  margin-right: 5px;
  font-size: 16px;
}
.dislike-count .el-icon {
  font-size: 16px;
  transform: rotate(180deg);
}
.reply-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.reply-header > .author-info {
  margin-top: 0;
}
.floor-number {
  font-size: 14px;
  font-weight: 500;
  color: #c0c4cc;
}
</style>